<script setup>
import { ref, onMounted, inject} from 'vue';
import axios from "axios";
import {getRoom} from "/@/api/hbmy_wx/getRoom";
import {controlRooms} from "/@/api/getRooms";
import {Toast} from "vant";
const jsList = ref([])
const active = ref("");
const point = ref(0)
const activeName = ref('')
const smartOpen =ref(false)
const router = useRoute()
//openDevice、closeDevice  -- 设备操作
//openRoom、closeRoom	   -- 开门关门
//setStudy、cancelStudy    -- 自习室操作
const deviceOpenStatus = ref(false)
const RoomOpenStatus = ref(false)
const StudySetStatus = ref(false)
const control = async (id, command) => {
  console.log(id)
  const data = {
    Roomid: parseInt(id),
    Command: command
  }
  console.log(data)
  const res = await controlRooms(data)
  if (res.response.value.code !== null & res.response.value.code === 200){
    Toast(res.response.value.extend.zOperation.msg)
  }else Toast('res.error.value')
}
const statList = ref([
  {
    name: "上课教室",
    roomList:[]
  },
  {
    name: "自习教室",
    roomList:[]
  },
  {
    name: "空闲教室",
    roomList:[]
  },
])
const initData = async () => {
  point.value = router.query.point
  //智慧教室 51 A 52 B
  const rep = await getRoom(point.value)
  console.log(rep)
  if (rep.response.value.extend.rooms.qx === 'smartOpen'){
    smartOpen.value = true
    console.log("smartOpensmartOpensmartOpensmartOpen")
  }
  jsList.value = rep.response.value.extend.rooms.rooms.map((item) => {
        return {
          "classNo": item.classNo,
          "course": item.course,
          "runStat": item.runStat,
        }
      }
  )
  for (let item of jsList.value) {
    if (item.course != null) {
      statList.value[0].roomList.push(item);
    } else if (item.course == null && item.runStat == 1) {
      statList.value[1].roomList.push(item);
    } else if (item.course == null && item.runStat == 0) {
      statList.value[2].roomList.push(item);
    }
  }
};

onMounted(() => {
  initData();
});

</script>
<template>
  <van-sticky>
    <Header title="智慧教室"></Header>
  </van-sticky>
  <div class="container">
    <van-tabs v-model="active" swipeable sticky style="margin-top: -10px">
      <van-tab v-for="(item,index) in statList" :title=item.name>
<!--          <van-cell-group>-->
<!--          <van-cell center v-for="value in item.roomList" :title="value.course" size="large">-->
<!--            <template v-slot:right-icon>-->
<!--            </template>-->
<!--            <p>{{value.classNo}}</p>-->
<!--          </van-cell>-->
<!--          </van-cell-group>-->
        <van-collapse v-model="activeName" accordion v-if="smartOpen">
          <van-collapse-item v-for="value in item.roomList" :name="value.classNo">
            <template #title>
              <a>{{value.course === null ? value.classNo : value.course}}</a>
            </template>
            <template #value>
              {{ value.course === null ? '' : value.classNo }}
            </template>
            <van-cell title="打开/关闭设备">
              <template #right-icon>
                <van-button plain type="primary" size="mini" @click="control(value.classNo, 'openDevice')">打开</van-button>
                <van-button plain type="default" size="mini" @click="control(value.classNo, 'closeDevice')" style="background-color: #829faf">关闭</van-button>
              </template>
            </van-cell>
            <van-cell title="开门/关门">
              <template #right-icon>
                <van-button plain type="primary" size="mini" @click="control(value.classNo, 'openRoom')">打开</van-button>
                <van-button plain type="default" size="mini" @click="control(value.classNo, 'closeRoom')" style="background-color: #83a0b0">关闭</van-button>
              </template>
            </van-cell>
            <van-cell title="设为/取消自习室">
              <template #right-icon>
                <van-button plain type="primary" size="mini" @click="control(value.classNo, 'setStudy')">打开</van-button>
                <van-button plain type="default" size="mini" @click="control(value.classNo, 'cancelStudy')" style="background-color: #809fb3">关闭</van-button>
              </template>
            </van-cell>
          </van-collapse-item>
        </van-collapse>
        <van-cell-group v-else>
          <van-cell v-for="value in item.roomList" :name="value.classNo">
            <template #title>
              <a>{{value.course === null ? value.classNo : value.course}}</a>
            </template>
            <template #value>
              {{ value.course === null ? '' : value.classNo }}
            </template>
          </van-cell>
        </van-cell-group>

      </van-tab>
    </van-tabs>
  </div>
</template>
<style scoped lang="less">
:deep(.van-tabs){
  .van-tabs__line{
    width: 33%;
    background-color: #2b95ef;
  }
  .van-tab--active{
    color: #2b95ef;
  }

  .van-tabs__wrap {
    position: sticky;
    top: 12vw;
    z-index: 100;
  }

}
a {
  display: block;
  /*超出隐藏*/
  overflow: hidden;
  /*禁止换行*/
  white-space: nowrap;
  /*超出用省略号代替*/
  text-overflow: ellipsis;

}

.van-button{
  border-color: #c8c8ce;
  padding: 10px 20px;
  background-color: #c8c8ce;
  color: #ffffff;
  border-radius: 5px;
  text-align: center;
  transition: background-color 0.11s;
}
</style>
